<div th:replace="/common/my-head.html"></div>
<title>SILLY报销流程</title>
<style>
    .my-dialog-dom {
        position: fixed;
        z-index: 100;
        padding: 0;
        opacity: 0.9;
    }

    .my-dialog-dom:hover {
        opacity: 1;
    }
</style>
<div id="index" class="row">
	<el-container style="height: calc(100vh - 20px);" v-my-drag>
		<el-header height="80" class="my-dialog-dom">
			<el-button class="my-dialog-header" icon="el-icon-search" @click="showSearch=!showSearch" type="warning"
			           circle></el-button>

			<el-collapse-transition>
				<div class="my-collapse" v-show="showSearch">
					<el-form :model="form" ref="searchForm" label-width="100px" size="mini">
						<div style="margin-top: 20px;">
							<el-row>
								<el-col :xs="24" :sm="12" :lg="8">
									<el-form-item label="报销单编号" prop="code">
										<el-input v-model="form.code" placeholder="报销单编号"></el-input>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :lg="8">
									<el-form-item label="备注" prop="remarks">
										<el-input v-model="form.remarks" placeholder="备注"></el-input>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :lg="8">
									<el-form-item label="状态" prop="taskName">
										<my-select v-model="form.taskName" placeholder="状态"
										           size="mini">
											<div slot="options">
												<el-option value="报销单申请" label="报销单申请"></el-option>
												<el-option value="审核" label="审核"></el-option>
												<el-option value="审批" label="审批"></el-option>
												<el-option value="完成" label="完成"></el-option>
											</div>
										</my-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :xs="24" :sm="24" :lg="24">
									<el-form-item label="">
										<el-button type="primary" icon="el-icon-search" size="mini"
										           @click="query">{{$t('Query')}}
										</el-button>
										<el-button icon="el-icon-refresh" size="mini" @click="reset">
											{{$t('Reset')}}
										</el-button>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
					</el-form>
				</div>
			</el-collapse-transition>

		</el-header>

		<el-main class="no-padding-top no-padding-bottom">
			<el-tabs type="border-card" v-model="activeTab">
				<el-tab-pane name="todo">
					<div slot="label">
						<el-link type="primary"><i class="el-icon-edit-outline"></i>
							{{$t('TodoTasks') }}
						</el-link>
						<el-divider direction="vertical"></el-divider>
						<el-link type="warning" @click="add">
							<i class="el-icon-document-add"></i>新增
						</el-link>
					</div>

					<el-table height="calc(100vh - 180px)" stripe border
					          :data="tableData.todo.list" v-loading="tableData.todo.loading">
						<el-table-column label="序号" type="index" :index="indexMethod" width="60"></el-table-column>
						<el-table-column label="操作" width="120">
							<template scope="scope">
								<el-button-group>
									<el-button type="primary" size="mini" icon="el-icon-edit"
									           @click="handle(scope.row)">
									</el-button>
									<el-button v-show="userUtil.isAdmin() ||
									(scope.row.taskObj.nodeKey == 'T0010' && scope.row.createUserId == userUtil.getUserId())"
									           type="danger" size="mini" icon="el-icon-delete"
									           @click="deleteRow(scope.row)">
									</el-button>
								</el-button-group>
							</template>
						</el-table-column>
						<el-table-column label="报销单编号" width="150" prop="code" sortable></el-table-column>
						<el-table-column label="报销金额" width="150" prop="money" sortable></el-table-column>
						<el-table-column label="备注" width="150" prop="remarks" sortable></el-table-column>
						<el-table-column label="当前处置人" min-width="100" prop="handleUserName"></el-table-column>
						<el-table-column label="状态" min-width="120" prop="taskName" sortable>
							<template slot-scope="scope">
								<el-tag type="primary" disable-transitions>{{scope.row.taskName}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="申请人" min-width="100" prop="createUserName" sortable></el-table-column>
						<el-table-column label="申请日期" min-width="102" prop="createDate" sortable></el-table-column>
					</el-table>
					<el-pagination background
					               layout="prev, pager, next, sizes, total, jumper"
					               :page-sizes="[10, 20, 50, 100]"
					               :page-size="tableData.todo.pageSize"
					               :current-page="tableData.todo.pageNo"
					               :total="tableData.todo.total"
					               @current-change="tableData.todo.pageNo=$event;loadTableData()"
					               @size-change="tableData.todo.pageSize=$event;loadTableData()">
					</el-pagination>
				</el-tab-pane>

				<el-tab-pane name="history" :lazy="true">
					<div slot="label">
						<el-link><i class="el-icon-document-checked"></i>
							{{$t('HistoricalTasks')}}
						</el-link>
					</div>

					<el-table height="calc(100vh - 180px)" stripe border
					          :data="tableData.history.list" v-loading="tableData.history.loading">
						<el-table-column label="序号" type="index" :index="indexMethod" width="60"></el-table-column>
						<el-table-column label="操作" width="70">
							<template scope="scope">
								<el-button-group>
									<el-button type="primary" size="mini" icon="el-icon-document"
									           @click="detail(scope.row)">
									</el-button>
								</el-button-group>
							</template>
						</el-table-column>
						<el-table-column label="报销单编号" width="150" prop="code" sortable></el-table-column>
						<el-table-column label="报销金额" width="150" prop="money" sortable></el-table-column>
						<el-table-column label="备注" width="150" prop="remarks" sortable></el-table-column>
						<el-table-column label="状态" min-width="120" prop="taskName" sortable>
							<template slot-scope="scope">
								<el-tag type="primary" disable-transitions>{{scope.row.taskName}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="申请人" min-width="100" prop="createUserName" sortable></el-table-column>
						<el-table-column label="申请日期" min-width="102" prop="createDate" sortable></el-table-column>
					</el-table>
					<el-pagination background
					               layout="prev, pager, next, sizes, total, jumper"
					               :page-sizes="[10, 20, 50, 100, 500, 1000, 5000]"
					               :page-size="tableData.history.pageSize"
					               :current-page="tableData.history.pageNo"
					               :total="tableData.history.total"
					               @current-change="tableData.history.pageNo=$event;loadTableData()"
					               @size-change="tableData.history.pageSize=$event;loadTableData()">
					</el-pagination>
				</el-tab-pane>

			</el-tabs>
		</el-main>

	</el-container>

</div>

<script type="text/javascript">

	var indexVue = new BaseIndexVue({
		data: function () {
			return {
				showSearch: false,
				form: {
					projectId: null,
					code: null,
					workStationId: null,
					classification: null,
					materialId: null,
					taskName: null
				},
				categoryMap: myConst.categoryMap.silly_reimbursement
			};
		},
		methods: {
			otherInit() {
				this.tableData.todo.searchForm = this.form;
				this.tableData.history.searchForm = this.form;
			},
			reset: function () {
				this.$refs.searchForm.resetFields();
				this.query();
			},
		}
	});
</script>